<template>

    <div>
        <div class="flexCenter">
            <div class="titleBefore"></div>
            <div>风险时空分析</div>
        </div>
        <div class="flexCenterBetween my-10">
            <div class="flexCenterCenter">
                <div class="mr-6">高风险覆盖率</div>
                <div style="border:1px solid #4779C2;border-radius: 100px;padding:1px;width:300px">
                    <div style="background-color:#4779C2;border-radius: 100px;height:6px;max-width: 100%"
                         :style="{width:securityRiskAnalysislzb*100+'%'}"></div>
                </div>
                <div class="text-primary ml-8">
                    <span>{{securityRiskAnalysislzb|rateFormat}}</span>
                    <span>%</span>
                </div>
            </div>

            <div class="flexCenter">
                <div style="width: 14px;height:14px;background-color: #ff8244"></div>
                <div class="ml-6 mr-18">高风险</div>

                <div style="width: 14px;height:14px;background-color: #ffce4b"></div>
                <div class="ml-6 mr-18">中风险</div>

                <div style="width: 14px;height:14px;background-color: #fffd84"></div>
                <div class="ml-6 mr-18">低风险</div>

                <div class="ml-18 mr-6">仅显示风险路段</div>
                <a-switch default-checked v-model="flag" @change="flagChange"/>
            </div>

        </div>
        <a-spin :spinning="spinning" size="large" tip="数据加载中">
            <div style="background-color: #B3CFF3;color:#303C47" class="py-6 mb-4 d-flex">
                <div style="width:260px;"></div>
                <div class="d-flex w-100">
                    <div v-for="i in 24" :key="i" class="px-6 text-center" style="width:100%;">
                        {{i>9?i:"0"+i}}
                    </div>
                </div>
            </div>

            <div style="height:300px;overflow-y: auto" class="noScrollBar">
                <div v-for="(item,i) in securityRiskAnalysisList" :key="i">
                    <div class="d-flex w-100">
                        <div class="rowBox">
                            <div>
                                {{item.name}}
                            </div>

                        </div>
                        <div class="w-100">
                            <div v-for="(skfbItem,j) in item.skfb" :key="j" class="d-flex w-100">
                                <div class="upDownBox flex-no-zoom" :class="">
                                    {{j==0?'上行':'下行'}}
                                </div>

                                <template v-for="(flag,t) in skfbItem">
                                    <div v-if="flag.level==0"
                                         :class="{'emphasize':flag.cover,'rightLast':t==(skfbItem.length-1),'bottomLast':j==1&&i==(securityRiskAnalysisLen-1)}"
                                         class="warningBox warning0">
                                    </div>
                                    <a-popover v-else trigger="click" :key="t">
                                        <div slot="content">
                                            <div>历史分析：近1年事故数{{flag.num}}起</div>
                                            <div>事件分析：</div>
                                            <div>天气分析：</div>

                                        </div>

                                        <div
                                                :class="{'emphasize':flag.cover,'warning1':flag.level==1,'warning2':flag.level==2,'warning3':flag.level==3,'rightLast':t==(skfbItem.length-1),'bottomLast':j==1&&i==(securityRiskAnalysisLen-1)}"
                                                class="warningBox">
                                        </div>
                                    </a-popover>
                                </template>


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </a-spin>

    </div>
</template>

<script>
    import {
        getCoverageRate, getPoliceCoverageRate, getPoliceSecurityRiskAnalysisList,
        getSecurityRiskAnalysisList
    } from "../../common/api";
    import * as moment from "moment";
    import {rateFormat} from "../../common/filters";

    export default {
        name: "security-risk-analysis",
        props: {
            type: {
                default: () => {
                }
            },  //position  police
            // searchParams: {
            //     default: () => {
            //     }
            // },
            // coverageRate: {
            //     default: () => {
            //     }
            // },
        },
        // watch: {
        //     searchParams: { //点击查询
        //         deep: false,  // 深度监听
        //         handler(newVal, oldVal) {
        //             console.log('searchParams , watch');
        //             this.getSecurityRiskAnalysisList();
        //         }
        //     },
        //     coverageRate: {
        //         deep: false,  // 深度监听
        //         handler(newVal, oldVal) {
        //             this.getCoverageRate();
        //         }
        //     },
        // },
        data() {
            return {
                securityRiskAnalysisList: [],
                securityRiskAnalysislzb: 0,
                securityRiskAnalysisLen: 0,

                spinning: false,

                flag: false,

                nalysisReqData: [],

            }
        },
        filters: {rateFormat},
        methods: {
            flagChange() {
                this.getSecurityRiskAnalysisList(...this.nalysisReqData)
            },
            getSecurityRiskAnalysisList(params, selected) {
                this.nalysisReqData = [params, selected];
                console.log(888888);
                this.spinning = true;
                var requestBody;

                if (this.type == 'position') {
                    requestBody = {
                        deptId: params.deptId,
                        motorwayId: params.motorwayId,
                        currentTime: moment(selected.positiondate).format('YYYY-MM-DD'),
                        nlevel: 3,
                        flag: this.flag ? 1 : 0, // 0全部 1风险
                    };

                    getSecurityRiskAnalysisList(requestBody).then(res => {
                        this.spinning = false;
                        if (res.isSuccess) {
                            this.securityRiskAnalysisList = res.data;
                            this.securityRiskAnalysisLen = this.securityRiskAnalysisList.length;
                            this.fomatData()
                        }

                    }, () => {
                        this.spinning = false;
                    });
                } else if (this.type == 'police') {
                    requestBody = {
                        deptId: params.deptId,
                        motorwayId: params.motorwayId,
                        currentTime: moment(selected.currentTime).format('YYYY-MM-DD'),
                        nlevel: 3,
                        flag: this.flag ? 1 : 0, // 0全部 1风险
                    };

                    // getPoliceSecurityRiskAnalysisList(requestBody).then(res => {
                    getSecurityRiskAnalysisList(requestBody).then(res => {
                        this.spinning = false;
                        if (res.isSuccess) {
                            this.securityRiskAnalysisList = res.data;
                            this.securityRiskAnalysisLen = this.securityRiskAnalysisList.length;
                            this.fomatData()
                        }

                    }, () => {
                        this.spinning = false;
                    });
                }

            },

            getCoverageRate(params, selected) {
                // console.log(params);
                // console.log(selected);
                var requestBody;
                requestBody = {
                    deptId: params.deptId,
                    motorwayId: params.motorwayId,
                    nlevel: 3,

                };
                console.log(this.type);
                //position  police
                if (this.type == 'position') {
                    requestBody.currentTime = moment(selected.positiondate).format('YYYY-MM-DD'),
                        getCoverageRate(requestBody).then(res => {
                            if (res.isSuccess) {
                                this.securityRiskAnalysislzb = res.data;
                            }

                        }, () => {
                        });
                } else if (this.type == 'police') {
                    requestBody.currentTime = moment(selected.currentTime).format('YYYY-MM-DD'),
                        // getPoliceCoverageRate(requestBody).then(res => {
                        getCoverageRate(requestBody).then(res => {
                            if (res.isSuccess) {
                                this.securityRiskAnalysislzb = res.data;
                            }

                        }, () => {
                        });
                }

            },
            fomatData() {
                this.securityRiskAnalysisList.forEach(v => {
                    if (v.skfb[0].length == 0) {
                        v.skfb[0] = [{level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }];
                        // console.log(v.skfb[0])
                    }
                    if (v.skfb[1].length == 0) {
                        v.skfb[1] = [{level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }, {level: 0, num: 0, cover: 1}, {level: 0, num: 0, cover: 1}, {
                            level: 0,
                            num: 0,
                            cover: 1
                        }]
                        // console.log(v.skfb[1])

                    }
                })
            }
        },
        mounted() {
            console.log(this.type)
        }
    }
</script>

<style scoped>

    .rowBox {
        vertical-align: middle;
        width: 154px;
        background-color: #F1F1F2;
        text-align: center;
        padding: 0 8px;
        border-right: 1px solid;
        border-top: 1px solid;
        border-color: #CFD0D1;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upDownBox {
        background-color: #F1F1F2;
        width: 50px;
        text-align: center;
        line-height: 24px;
        margin-right: 10px;
        border-top: 1px solid;
        border-color: #CFD0D1

    }

    .warningBox {
        width: 100%;
        height: 25px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-color: rgba(0, 0, 0, .1);
        /*flex-shrink: 0;*/
    }

    .warningBox.rightLast {
        border-right: 1px solid rgba(0, 0, 0, .1);
    }

    .warningBox.bottomLast {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .warningBox.warning1 {
        background-color: #fffd84;
    }

    .warningBox.warning2 {
        background-color: #ffce4b;
    }

    .warningBox.warning3 {
        background-color: #ff8244;
    }

    .warningBox.emphasize {
        background-image: url('../../assets/img/deployment/flagRed.png');
        background-repeat: no-repeat;
        background-position: center;
    }

</style>
